<template>
  <el-card class="exitsence-emp-charts">
    <dept-select
      class="filter-select"
      :onlyCompany="true"
      placeholder="选择公司"
      :value.sync="deptId"
      :clearable="false"
      @getDeptDetailData="getDeptDetailData"
    />
    <div class="charts" ref="exitsenceEmpCharts"></div>
  </el-card>
</template>

<script>
import { statisticsDeptEmpApi } from "@/api/statistics";
export default {
  name: "ExistenceEmpCharts",
  data() {
    return {
      deptId: 2,
      data: [],
      dept: {
        deptName: "1024软件科技有限公司",
      },
      keys: [],
    };
  },
  created() {},
  mounted() {
    this.getStatisticsData();
  },
  watch: {
    deptId: {
      handler(nVal) {
        console.log(nVal);
        if (!nVal) this.deptId = 2;
        this.getStatisticsData();
      },
    },
  },
  methods: {
    async getStatisticsData() {
      const myCharts = this.$echarts.init(this.$refs.exitsenceEmpCharts);
      const { code, data } = await statisticsDeptEmpApi(this.deptId);
      if (code !== 200) return;
      this.data = data;
      this.keys = this.data.map((item) => item.name);
      let total = 0;
      this.data.forEach((item) => {
        total += item.value;
      });
      const option = {
        title: {
          text: `${this.dept.deptName}各部门人数统计情况`,
          subtext: `总共${total}人`,
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "left",
          data: this.keys,
        },
        series: [
          {
            name: `${this.dept.deptName}`,
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            itemStyle: {
              color: function (params) {
                var colorList = [
                  "#2980b9",
                  "#8e44ad",
                  "#27ae60",
                  "#FD7272",
                  "#e74c3c",
                  "#45aaf2",
                  "#2c3e50",
                  "#0fb9b1",
                  "#e74c3c",
                  "#e74c3c",
                  "#FD7272",
                  "#45aaf2",
                  "#2c3e50",
                  "#0fb9b1",
                ];
                return colorList[params.dataIndex];
              },
            },
          },
        ],
      };

      myCharts.clear();
      myCharts.setOption(option);
    },
    getDeptDetailData(dept) {
      this.dept = dept;
    },
  },
};
</script>

<style scoped lang="scss">
.charts {
  height: 300px;
}
.exitsence-emp-charts {
  margin-top: 30px;
}
.filter-select {
  margin-bottom: 10px;
}
</style>
